<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <a-row>
          <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="column-title">基础信息</div>
          </a-col>
          <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="text-align: right;">
            <a-button type="primary" class="link" @click="handleEdit()">
              编辑
            </a-button>
          </a-col>
        </a-row>
        
        
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '140px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="策略名称">{{ strategyData?.name || '-' }}</a-descriptions-item>
            <a-descriptions-item label="策略ID">{{ strategyData?.strategy_id || '-' }}</a-descriptions-item>
            <a-descriptions-item label="启用状态">
             {{ strategyData?.enabled ? '启用' : '禁用' }}
            </a-descriptions-item>
            <a-descriptions-item label="策略描述" v-if="strategyData?.description">
              {{ strategyData?.description }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>

      <div class="detail-column">
        <div class="column-title">会员定价</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '140px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="年费" v-if="strategyData?.annual_fee != null">
              ¥{{ strategyData?.annual_fee }}
            </a-descriptions-item>
            <a-descriptions-item label="排序" v-if="strategyData?.sort != null">
              {{ strategyData?.sort }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>

      <div class="detail-column">
        <div class="column-title">AI服务</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '140px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="AI功能">
               {{ strategyData?.ai_enabled ? '启用' : '禁用' }}
            </a-descriptions-item>
            <a-descriptions-item label="会员Token" v-if="strategyData?.tokens_for_member != null">
              {{ strategyData?.tokens_for_member }}
            </a-descriptions-item>
            <a-descriptions-item label="非会员Token" v-if="strategyData?.tokens_non_member != null">
              {{ strategyData?.tokens_non_member }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>

      <div class="detail-column">
        <div class="column-title">关联实验</div>
        <div class="column-content">
          <a-table 
            :dataSource="strategyData?.membership_strategy_experiments || []" 
            :columns="experimentColumns"
            :pagination="false"
            rowKey="experiment_id"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'thumb_url'">
                <img 
                  :src="record.experiment?.thumb_url" 
                  alt="实验缩略图" 
                  style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;"
                  @error="handleImageError"
                />
              </template>
              <template v-if="column.key === 'member_only'">
              {{ record.member_only ? '仅会员' : '开放' }}
              </template>
              <template v-if="column.key === 'ai_enabled'">
                {{ record.experiment?.ai_enabled ? '启用' : '禁用' }}
              </template>
              <template v-if="column.key === 'virtual_enabled'">
                {{ record.experiment?.virtual_enabled ? '启用' : '禁用' }}
              </template>
              <template v-if="column.key === 'twin_abled'">
                 {{ record.experiment?.twin_abled ? '启用' : '禁用' }}
              </template>
            </template>
          </a-table>
        </div>
      </div>

      <div class="detail-column">
        <div class="column-title">时间信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '140px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="创建时间" v-if="strategyData?.created">
              {{ strategyData?.created }}
            </a-descriptions-item>
            <a-descriptions-item label="更新时间" v-if="strategyData?.updated">
              {{ strategyData?.updated }}
            </a-descriptions-item>
            <a-descriptions-item label="备注" v-if="strategyData?.remark">
              {{ strategyData?.remark }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useGlobalStore } from "@/store/modules/global";
import API from "@/api/administrator";

const store = useGlobalStore();
const router = useRouter();
const route = useRoute();
const query = computed(() => route.query);
const strategyData = ref(null);

// 实验表格列定义
const experimentColumns = [
  {
    title: '缩略图',
    key: 'thumb_url',
    width: 80,
    align: 'center'
  },
  {
    title: '实验名称',
    dataIndex: ['experiment', 'name'],
    key: 'name',
    width: 150
  },
  // {
  //   title: '实验ID',
  //   dataIndex: ['experiment', 'experiment_id'],
  //   key: 'experiment_id',
  //   width: 100
  // },
  {
    title: '实验分类',
    dataIndex: ['experiment', 'experiment_category_name'],
    key: 'experiment_category_name',
    width: 120
  },
  {
    title: '访问权限',
    key: 'member_only',
    width: 100,
    align: 'center'
  },
  {
    title: '非会员免费次数',
    dataIndex: 'free_amount_non_member',
    key: 'free_amount_non_member',
    width: 130,
    align: 'center'
  },
  {
    title: 'AI功能',
    key: 'ai_enabled',
    width: 80,
    align: 'center'
  },
  {
    title: '虚拟实验',
    key: 'virtual_enabled',
    width: 90,
    align: 'center'
  },
  {
    title: '数字孪生',
    key: 'twin_abled',
    width: 90,
    align: 'center'
  },
  {
    title: '排序',
    dataIndex: 'sort',
    key: 'sort',
    width: 60,
    align: 'center'
  }
];

// 图片加载错误处理
const handleImageError = (event) => {
  event.target.src = '/public/data/experiment-img.png'; // 使用默认图片
};

// 获取会员策略详情数据
const getStrategyData = async () => {
  try {
    const params = {
      strategy_id: query.value.strategy_id || 's1', // 从路由参数获取strategy_id
    };
    console.log("请求参数:", params);
    console.log("路由参数:", query.value);
    
    const res = await API.MembershipStrategyFetchModel(params);
    console.log("API返回结果:", res);
    
    if (res) {
      strategyData.value = res;
      console.log("获取到的会员策略详情:", res);
      console.log("strategyData.value:", strategyData.value);
    } else {
      console.error("API调用失败:", res);
      // 如果API调用失败，使用测试数据
      const testData = {
        "strategy_id": "s1",
        "name": "会员模式1",
        "description": "这是一个测试策略",
        "annual_fee": 99,
        "ai_enabled": true,
        "tokens_non_member": 200,
        "tokens_for_member": 3000,
        "remark": "测试备注",
        "sort": 1,
        "enabled": true,
        "created": "2024-01-01 10:00:00",
        "updated": "2024-01-15 15:30:00"
      };
      strategyData.value = testData;
      console.log("使用测试数据:", testData);
    }
  } catch (error) {
    console.error("获取会员策略详情失败:", error);
    // 如果出现异常，使用测试数据
    const testData = {
      "strategy_id": "s1",
      "name": "会员模式1",
      "description": "这是一个测试策略",
      "annual_fee": 99,
      "ai_enabled": true,
      "tokens_non_member": 200,
      "tokens_for_member": 3000,
      "remark": "测试备注",
      "sort": 1,
      "enabled": true,
      "created": "2024-01-01 10:00:00",
      "updated": "2024-01-15 15:30:00"
    };
    strategyData.value = testData;
    console.log("异常情况下使用测试数据:", testData);
  }
};

const handleEdit = () => {
  router.push({
    path: 'strategy-management-option',
    query: {
      strategy_id: query.value.strategy_id || strategyData.value?.strategy_id
    }
  })
}

onMounted(() => {
  getStrategyData();
});
</script>